import React, { Component } from 'react'
import {
  View, Text, StyleSheet, Image, TouchableOpacity
} from 'react-native'

import NavBar from 'src/components/navBar'
import navigationhelper from 'src/components/navigationhelper'

export default class AddCardSuccessView extends Component {
  constructor(props) {
    super(props)
    const data = this.props.navigation.getParam('data')
    this.state = {
      data
    }
  }

  handleMakePlan = () => {
    // navigationhelper.goBack()
    navigationhelper.navigate('MakePlanView', {cardId: this.state.data})
  }

  handleAddNewCard = () => {
    // navigationhelper.goBack()
    navigationhelper.navigate('AddCardView')
  }

  render () {
    return (
      <View style={styles.container}>
        <NavBar 
           back={()=>{navigationhelper.goBack()}} 
          title={'添加信用卡'}
          leftText={'卡管家'} 
          barStyle={'dark-content'}
          />
        <View style={{ flex: 1, alignItems: 'center' }}>
          <Image style={styles.resultImage}
            source={require('src/assets/icon_success.png')} />
          <Text style={styles.resultText}>{'信用卡添加成功'}</Text>
          <Text style={styles.tipText}>{'你可以在卡管家查看该信用卡的信息'}</Text>
        </View>
        <TouchableOpacity
          style={styles.btnContainer}
          onPress={this.handleMakePlan}>
          <Text style={styles.btnText, {color:'#fff',fontWeight:'600'}}>{'去制定还款计划'}</Text>
        </TouchableOpacity>
        <View style={{ height: 14 }} />
        <TouchableOpacity
          style={[styles.btnContainer, { backgroundColor: '#E9E9E9' }]}
          onPress={this.handleAddNewCard}>
          <Text style={styles.btnText}>{'继续添加'}</Text>
        </TouchableOpacity>
        <View style={{ height: 16 }} />
      </View>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent:'center'
  },
  resultImage: {
    resizeMode: 'contain',
    marginTop: 50
  },
  resultText: {
    fontSize: 20,
    color: '#2e2e2e',
    fontWeight: 'bold',
    marginTop: 42
  },
  tipText: {
    fontSize: 13,
    color: '#8e8e93',
    marginTop: 8
  },
  btnContainer: {
    height: 50,
    marginLeft: 16,
    marginRight: 16,
    borderRadius: 5,
    backgroundColor: '#ff2121',
    alignItems: 'center',
    justifyContent: 'center'
  },
  btnText: {
    fontSize: 16,
    color: '#ff2121',
    fontWeight: 'bold'
  }
})